﻿@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>MultiFiles</title>
    <style>
        .selected {
            background-color: lightskyblue;
        }
    </style>
</head>
<body>
    <div>
        @*<form id="form" enctype="multipart/form-data">
                <input name="objFile" type="file" />
                <input name="objFile" type="file" />
                <input name="objFile1" type="file" />
                <input name="objFile1" type="file" />
                <input name="objFile2" type="file" />
                <input name="objFile3" type="file" />
                <input type="button" id="btn_submit" value="提交" />
            </form>*@
        <form id="form" enctype="multipart/form-data">
            <ul id="ul_articlepicturecollection">
                <li onclick="SelectArticlePicture(this);">
                    <input name="objFile1" type="file" />
                </li>
                <li onclick="SelectArticlePicture(this);">
                    <input name="objFile1" type="file" />
                </li>
                <li onclick="SelectArticlePicture(this);">
                    <input name="objFile2" type="file" />
                </li>
                <li onclick="SelectArticlePicture(this);">
                    <input name="objFile3" type="file" />
                </li>
            </ul>
            <input type="button" id="btn_submit" value="提交" />
            <input type="button" id="btn_up" value="上移" onclick="Up();" />
            <input type="button" id="btn_down" value="下移" onclick="Down();" />
            <input type="button" id="btn_change" value="改变Name值" onclick="changName();" />
        </form>
    </div>
    <script src="~/Content/js/jquery-1.8.2.js"></script>
    <script src="~/Content/js/jquery.form.js"></script>
    <script src="~/Content/js/tjzheng.js"></script>
    <script type="text/javascript">
        $("#btn_submit").click(function () {
            var objFormEntity = new FormEntity("#form");
            objFormEntity.url = "/Files/MultiFilesSave";
            objFormEntity.isClearData = false;
            objFormEntity.submit();
        });

        function Up() {
            var $selected = $("#ul_articlepicturecollection .selected");
            var $prev = $selected.prev();
            if ($selected.length > 0 && $prev.length > 0) {
                $selected.insertBefore($prev);
            }
        }

        function Down() {
            var $selected = $("#ul_articlepicturecollection .selected");
            var $next = $selected.next();
            if ($selected.length > 0 && $next.length > 0) {
                $selected.insertAfter($next);
            }
        }

        function SelectArticlePicture(source) {
            $("#ul_articlepicturecollection .selected").removeClass("selected");
            $(source).addClass("selected");
        }

        function changName() {
            $("input[name=objFile3]").attr("name", "objFile4");
        }
    </script>
</body>
</html>
